<!DOCTYPE html>
<html>
<head>
<title>pull to refresh</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/pullToRefresh.css"/>
<script src="js/iscroll.js"></script>
<script src="js/pullToRefresh.js"></script>
<style type="text/css" media="all">
body, html {
	padding: 0;
	margin: 0;
	height: 100%;
	font-family: Arial, Microsoft YaHei;
	color: #111;
}
.scroller li {
	height:60px;
	border-bottom: 1px solid #eee;
	background-color: #fff;
	font-size: 14px;
	
}
.pullDownLabel img {
	width: 13px;
	height: 13px;
	margin-top: -1px;
	vertical-align: -2px;
	margin-right: 5px;
}
#wrapper ul li img{width:60px; float:left;  margin-left:10px;}
.game-info{text-align:left; float:left; margin-left:10px; width:210px; overflow:hidden; height:60px;}
.game-info h1{font-size:16px; margin-bottom:8px;}
.game-info p:nth-child(2){font-size:12px; color:#B6B6B6;}
.game-info p:nth-child(3){font-size:12px; color:#9D9D9D;}
#wrapper ul li button{position:absolute; right:20px; margin-top:10px; background-color:#F8CD0C; border:0; color:#fff; font-family:Microsoft YaHei; padding:5px 14px; border-radius:3px;}
</style>
</head>
<body>
<!--must content ul li,or shoupi-->
<div id="wrapper">
  <ul>
    <li>
    <img src="img/game1.png">
    <div class="game-info">
    <h1>华仔天下</h1>
    <p>3万次下载     147.98M</p>
    <p>网易游戏出品,双维度操控，真人真机对战</p>
    </div>
    <button>下载</button>
    </li>
    <li>
     <img src="img/game2.png">
    <div class="game-info">
    <h1>有杀气的小华</h1>
    <p>4万次下载     97.98M</p>
    <p>网易游戏出品,3D即时战斗Q版手游</p>
    </div>
    <button>下载</button>
    </li>
    <li>
     <img src="img/game3.png">
    <div class="game-info">
    <h1>烈焰小华</h1>
    <p>5万次下载     67.18M</p>
    <p>再现经典即时战斗玄幻武侠手游</p>
    </div>
    <button>下载</button>
    </li>
    <li>
     <img src="img/game4.png">
    <div class="game-info">
    <h1>灵车飘逸吧</h1>
    <p>2万次下载     33.18M</p>
    <p>承载着3亿玩家期待的十年经典游戏</p>
    </div>
    <button>下载</button>
    </li>
    <li>
      <img src="img/game5.png">
    <div class="game-info">
    <h1>辉仔漏夜上东莞</h1>
    <p>2万次下载     53.43M</p>
    <p>超愉悦，与二次女友尺度大冒险</p>
    </div>
    <button>下载</button>
    </li>
    <li>
         <img src="img/game6.png">
    <div class="game-info">
    <h1>仙剑客栈20周年版</h1>
    <p>7万次下载     133.18M</p>
    <p>仙剑20周年王牌手游巨制一全新演绎大	</p>
    </div>
    <button>下载</button>
    </li>
    <li>
    <img src="img/game7.png">
    <div class="game-info">
    <h1>展哥剑风传奇</h1>
    <p>5万次下载     89.18M</p>
    <p>漫画神作改编 首创三维一体玩法RPG巨作</p>
    </div>
    <button>下载</button>
    </li>
  </ul>
</div>
<script>
refresher.init({
	id:"wrapper",//<------------------------------------------------------------------------------------┐
	pullDownAction:Refresh,                                                            
	pullUpAction:Load 																			
	});																																							
function Refresh() {																
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;																		
		el =document.querySelector("#wrapper ul");					
		//这里写你的刷新代码				
		document.getElementById("wrapper").querySelector(".pullDownIcon").style.display="none";		
		document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML="<img src='css/ok.png'/>刷新成功";																					 
		setTimeout(function () {
			wrapper.refresh();
			document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML="";								
			},1000);//模拟qq下拉刷新显示成功效果
		/****remember to refresh after  action completed！ ---yourId.refresh(); ----| ****/
	}, 1000);
}
function Load() {
	setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el =document.querySelector("#wrapper ul");
		for (i=0; i<2; i++) {
			li = document.createElement('li');
			li.innerHTML="<img src='img/game8.png'><div class='game-info'><h1>华仔超神战记</h1><p>9万次下载     89.18M</p><p>秒杀虚拟摇杆，砸烂手机键盘</p></div><button>下载</button>"
			el.appendChild(li, el.childNodes[0]);
		}
		wrapper.refresh();/****remember to refresh after action completed！！！   ---id.refresh(); --- ****/
	},2000);	
}
</script>
</body>
</html>